<template>
  <div class="border1 box-shadow-hover" >
    <transition name="fade">
      <div v-show="isAdd" class="WH100 flex-center" @click="addArticleType">
        <i class="el-icon-plus fz-30 cursor-pointer"></i>
      </div>
    </transition>
    <transition name="fade">
      <div v-show="!isAdd" class="WH100 flex-column flex-center p-10 flex-space-around">
        <el-upload
          class="border1 w-50 h-50 flex-center"
          action="http://localhost:3000/admin/uploadArticleTypesIcon"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" class="W100" :src="imageUrl">
            <i v-else class="el-icon-plus"></i>
        </el-upload>
        <el-input size="mini" minlength="1" maxlength="20" clearable show-word-limit v-model="addTypeInfo.articleTypeName" placeholder="输入文章类型名称"></el-input>
        <el-input size="mini" type="textarea" :autosize="{ minRows: 2, maxRows: 2}" minlength="1" maxlength="30" clearable show-word-limit v-model="addTypeInfo.articleTypeDescription" placeholder="输入文章类型简介"></el-input>
        <div class="W100"><el-button size="mini" class="W100" type="primary" @click="save">保存</el-button></div>
        <div class="W100"><el-button size="mini" class="W100" @click="cancel">取消</el-button></div>
      </div>
    </transition>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdd: true,
      imageUrl: '',
      addTypeInfo: {
        articleTypeDescription: null,
        articleTypeIcon: null,
        articleTypeName: null,
      },
    }
  },
  methods: {
    addArticleType() {
      this.isAdd = false
    },
    async save() {
      let res = await this.api.post('/admin/article/addArticleType', {
        ...this.addTypeInfo
      })
      if(res.code == 0) {
        // 重置内容
        this.isAdd = true
        this.addTypeInfo.articleTypeDescription = null
        this.addTypeInfo.articleTypeIcon = null
        this.addTypeInfo.articleTypeName = null

        this.$emit('is-add')
        this.$message({message: '添加成功',type: 'success'})
      }else {
        this.$message({message: res.message,type: 'warning'})
      }
    },
    cancel() {
      this.isAdd = true
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.addTypeInfo.articleTypeIcon = res.data.address
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    }
  },
}
</script>

<style lang="scss" scoped>
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.button {
  padding: 0;
  float: right;
}
.image {
  width: 100%;
  display: block;
}
.fade-enter-active {
  transition: opacity .5s;
}
.fade-enter {
  opacity: 0;
}
.fade-leave {
  height: 0;
}
</style>